<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2022/4/2
  Time: 20:39
  To change this template use File | Settings | File Templates.
--%>
<%--我们用ajax请求方式获取数据 处理数据--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/static/jquery-1.11.1.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap.min.css">
    <script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>


    <style>
        h1{
            color: #3e8f3e;
        }
        a{
            text-decoration: none;
            color: beige;

        }
    </style>
    <script>
        //保存末页数据  当前面保存数据时候在末页显示
        var sumData;
        //保存当前页数据 用于修改和删除显示
        var nowPage
        function del() {
            return confirm("你确定要删除吗？");
        }
        /*页面加载完成以后 直接去发送ajax请求，要到分页数据*/
        $(function () {
            //第一次显示为第一页
           to_page(1);
        });
        //页面跳转 当前是多少页 就显示多少页
        function to_page(pn){
            $.ajax({
                /*请求地址*/
                url:"${pageContext.request.contextPath}/employee/findAllJson",
                /*页数*/
                data:"pn="+pn,
                type:"GET",
                /*返回数据 成功回调函数*/
                success:function (result) {
                    //console.log(result)
                    //1.解析并显示员工表格
                    buile_emps_table(result);
                    //2.解析并显示分页信息
                    build_page_nav(result);
                }
            });
        }

        //1.解析并显示员工表格
        function buile_emps_table(result) {
            //获取末页
            sumData = result.extend.pageInfo.pages;
            //获取当前页
            nowPage = result.extend.pageInfo.pageNum;
            //清空table表格里面数据
            $("#emps_table tbody").empty();
            //获取到集合list里面所有值
            var emps=result.extend.pageInfo.list;
            //进行循环 获取
            $.each(emps,function (index,item) {
                var checkBoxTd =  $("<td><input type='checkbox' class='check_item'/></td>");
                var empIdTd = $("<td></td>").append(item.emp_id);
                var empNameTd = $("<td></td>").append(item.name);
                var empGenderTd = $("<td></td>").append(item.gender);
                var empEmailTd = $("<td></td>").append(item.email);
                var empDepNameTd = $("<td></td>").append(item.dep_name);
                var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm update_btn")
                            .append("<span></span>").addClass("glyphicon glyphicon-pencil")
                            .append("编辑");
                //为编辑添加一个自定义的属性 来表示当前员工的id
                editBtn.attr("edit-id",item.emp_id);
                 var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
                     .append("<span></span>").addClass("glyphicon glyphicon-trash")
                     .append("删除")
                //为删除按钮添加一个自定义的属性 来表示当前员工的id
                delBtn.attr("del-id",item.emp_id);
                var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
                //append方法执行完成之后还是返回原来的元素  所以我们可以一直append
                $("<tr></tr>").append(checkBoxTd)
                .append(empIdTd).append(empNameTd)
                .append(empGenderTd).append(empEmailTd)
                .append(empDepNameTd).append(btnTd).appendTo("#emps_table tbody");
            })
        }
        //2.解析并显示分页信息  点击下一页 显示相应的页面
        function build_page_nav(result) {
            //分页也是一样  分页显示之前清空
            $("#page_nav_area").empty();
            var ul=$("<ul></ul>").addClass("pagination");
            var firstPageLi = $("<li></li>").append($("<a></a>").append("首页")).attr("href","#");
            var prePageLi=$("<li></li>").append($("<a></a>").append("上一页"));
            if(result.extend.pageInfo.hasPreviousPage==false){
                firstPageLi.addClass("disabled");
                prePageLi.addClass("disabled");
            }
            //为元素添加点击翻页的事件
            //首页
            firstPageLi.click(function () {
                to_page(1);
            });
            //上一页
            prePageLi.click(function () {
                to_page(result.extend.pageInfo.pageNum-1);
            });


            var nextPageLi=$("<li></li>").append($("<a></a>").append("下一页"));
            var lastPageLi=$("<li></li>").append($("<a></a>").append("末页")).attr("href","#");
            if(result.extend.pageInfo.hasNextPage==false){
                nextPageLi.addClass("disabled");
                lastPageLi.addClass("disabled");
            }
            //为元素添加点击翻页的事件
            //末页
            lastPageLi.click(function () {
                to_page(result.extend.pageInfo.pages);
            });
            //下一页
            nextPageLi.click(function () {
                to_page(result.extend.pageInfo.pageNum+1);
            });

           //构造 添加首页和前一页
            ul.append(firstPageLi).append(prePageLi);
            //遍历元素 1 2 3 4 页码号
            $.each(result.extend.pageInfo.navigatepageNums,function (index,item) {
                var numLi = $("<li></li>").append($("<a></a>").append(item));
                if(result.extend.pageInfo.pageNum == item){
                    numLi.addClass("active");
                }
                //点击那一页 就去哪一页
                numLi.click(function () {
                    to_page(item);
                })
                ul.append(numLi);
            });
            //添加下一页和末页
            ul.append(nextPageLi).append(lastPageLi);
            //构造nav标签 把ul标签加入到nva标签
            var Nva = $("<nav></nav>").append(ul);
            //最后把导航条添加到要显示的区域中
            Nva.appendTo("#page_nav_area");
        }
        //处理添加 删除等操作
        $(document).ready(function() {
            /*点击添加按钮 弹出添加框*/
            $("#add_btn").click(function() {
                //点击添加时 清除弹出框中表单数据
                //history.go(0);
                $("#myModal form")[0].reset();
                //清空表单样式
                $("#myModal form").find("*").removeClass("has-error has-success");
                $("#myModal form").find(".help-block").text("");
                $("#myModal").modal({
                    backdrop:"static"
                })
            });
            //数据校验
            function validate_add_form(){
                const Name = $("#depName").val();
                const email = $("#inputEmail").val();
                //拿到校验的数据 使用正则表达式
                //1.对姓名进行校验  我们允许输入中英文  英文3-16位 中文2到5位

                const addName = /(^[a-zA-Z0-9_-]{3,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
                if(!addName.test(Name)){
                   //alert("用户名可用使用2-5位中和3-16位英文数字组合")
                    show_validate_msg("#inputName","error","用户名是2-5位中文或者3-16位英文组合");
                    /*$("#inputName").parent().addClass("has-error");
                    $("#inputName").next("span").text("用户名是2-5位中文或者3-16位英文组合");*/
                    return false;
                } else {
                    show_validate_msg("#inputName","success"," ");
                    /*$("#inputName").parent().addClass("has-success");
                    $("#inputName").next("span").text("");*/
                }
                //2.校验邮箱

                const addEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
                if(!addEmail.test(email)){
                    //alert("邮箱格式不对");
                    show_validate_msg("#inputEmail","error","邮箱格式不对");
                   /* $("#inputEmail").parent().addClass("has-error");
                    $("#inputEmail").next("span").text("邮箱格式不对");*/
                    return  false;
                } else {
                    show_validate_msg("#inputEmail","success"," ");
                   /* $("#inputEmail").parent().addClass("has-success");
                    $("#inputEmail").next("span").text("");*/
                }
                return true;
            }
            //对校验进行代码抽取
            //ele是id值 statue是success或者error状态  msg是提示信息
            function show_validate_msg(ele,status,msg){
                //清除当前元素的校验状态
                $(ele).parent().removeClass("has-error has-success");
                $(ele).next("span").text(" ");
                if("succcess"==status){
                    $(ele).parent().addClass("has-success");
                    $(ele).next("span").text(msg);
                } else if("error" == status){
                    $(ele).parent().addClass("has-error");
                    $(ele).next("span").text(msg);
                }
            };
            //校验用户名是否可用
            $("#inputName").change(function () {
                //发送ajax请求校验用户名是否可用
                //获取用户输入框中的值
                const names = this.value;
                $.ajax({
                    url:"${pageContext.request.contextPath}/employee/existUserName",
                    data:"name="+names,//把用户输入框中的值传到控制层
                    type:"POST",
                    success:function (result){
                        //获取result中的状态码  200表示成功 可用
                        if(result.code==200){
                            show_validate_msg("#inputName","success","");
                            //添加一个自定义属性  如果这个属性值是success 说名成功
                            $("#inputName").attr("ajax-va","success");
                        } else{
                            show_validate_msg("#inputName","error","用户名已经存在");
                            $("#inputName").attr("ajax-va","error");
                        }
                    }
                });
            })
            /*当在添加框中填好信息 之后  点击添加 实现添加功能*/
            $("#add_data").click(function () {
                //把表单中填写的数据提交给控制层中的保存方法

                //先对要提交的数据进行校验  如果格式合格才进行对数据请求
                if(!validate_add_form()){
                    return false;
                }
                //判断ajax请求的数据校验是否成功  如果失败就不执行下面操作
                if($(this).attr("ajax-va")=="error"){
                    return  false;
                }
                //发送ajax请求进行保存数据
                $.ajax({
                    /*保存数据路径*/
                    url:"${pageContext.request.contextPath}/employee/addJson",
                    type: "POST",
                    /*ajax提供给我们的一个方法serialize  数据序列化*/
                    data:$("#myModal form").serialize(),
                    success:function (result) {
                        //alert(result)
                        //点击添加  添加框消失  并且显示在最后一页
                        //1.关闭添加框
                        $("#myModal").modal('hide');
                        //2来到最后一页  显示刚刚添加的数据
                        //把总的数据记录传过去  显示最后一页
                        to_page(sumData);
                    }
                })
            });

            //点击编辑  出现弹框
            //1 我们是按钮创建之前就绑定了click  所以直接绑定不上
            //jquery中没有live  使用On来代替
            //第一个参数是绑定的事件  第二个是为谁绑定 这里为编辑按钮
            $(document).on("click",".update_btn",function () {
                /*查出员工信息*/
                /*把当前员工id传给控制层进行查询 edit-id是我们自定义属性 在编辑按钮哪里添加的*/
                getData($(this).attr("edit-id"));
                //把员工的id传递给弹出框的修改按钮
                $("#update_data").attr("edit-id",$(this).attr("edit-id"));
                /*之后打开修改框*/
                $("#updateModal").modal({
                    backdrop: "static"
                })
            });
            //获取员工信息 进行数据回显
            function getData(emp_id){
                $.ajax({
                    url:"${pageContext.request.contextPath}/employee/findById",
                    data:"emp_id="+emp_id,
                    type:"GET",
                    success:function (result) {
                       var Data = result.extend.data;
                        $("#inputName1").val(Data.name);
                        //获取单选框中的值
                        $("#updateModal input[name=gender]").val([Data.gender]);
                        $("#inputEmail1").val(Data.email);
                        $("#depName1").val(Data.dep_name);
                    }
                })
            }
            //点击更新按钮 进行更新
            $("#update_data").click(function () {
                //先进行邮箱校验
                //2.校验邮箱
                const email = $("#inputEmail1").val();
                const addEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
                if(!addEmail.test(email)){
                    //alert("邮箱格式不对");
                    show_validate_msg("#inputEmail1","error","邮箱格式不对");
                    return  false;
                } else {
                    show_validate_msg("#inputEmail1","success"," ");
                };
                //然后在进行ajax请求保存更新员工的数据
                $.ajax({
                    url:"${pageContext.request.contextPath}/employee/update/"+$(this).attr("edit-id"),
                    type:"PUT",//我们使用PUT方法要去web.xml中进行过滤器配置 HttpPutFormContentFilter
                    data:$("#updateModal form").serialize(),
                    success:function(result){
                        //1.关闭添加框
                        $("#updateModal").modal('hide');
                        //2来到当前页  显示刚刚修改的数据
                        //把总的数据记录传过去  显示当前页修改数据
                        to_page(nowPage);
                    }
                })
            });
            //绑定删除按钮事件 单个删除
            $(document).on("click",".delete_btn",function () {
                //1.弹出是否确认删除对话框
                //alert($(this).parents("tr").find("td:eq(1)").text());
                //获取tr中td标签中的第二个属性  是姓名
                var Name = $(this).parents("tr").find("td:eq(2)").text();
                var emp_id = $(this).attr("del-id");
                if(confirm("确定要删除  "+Name+"  吗？")){
                    $.ajax({
                        url:"${pageContext.request.contextPath}/employee/delete",
                        data:"emp_id="+emp_id,
                        type:"GET",
                        success:function (result) {
                            //来到当前页  显示刚刚删除的数据所在页面
                            //把当前页数据  显示当前页数据
                            to_page(nowPage);
                        }
                    })
                }
            });
            //完成全选或者全不选操作
            $("#check_all").click(function () {

                //alert($(this).prop("checked"));
                $(".check_item").prop("checked",$(this).prop("checked"));
            });
            //如果下面一页5个都选满 那全选的选择框也要被选中
            $(document).on("click",".check_item",function () {
                //派单当前选中的元素是否为5个
                var flag = $(".check_item:checked").length == $(".check_item").length;
                $("#check_all").prop("checked",flag);
            });
            //给全部删除绑定事件
            $("#deleteAll_btn").click(function () {
                var emp_ids="";//存储批量删除的id
                $.each($(".check_item:checked"),function () {
                    //组装员工id字符串
                    emp_ids+=$(this).parents("tr").find("td:eq(1)").text(+" ");
                })
                //去除删除的id多余的-
                emp_ids=emp_ids.substring(0,emp_ids.length-1);
                if(confirm("确定删除选中全部内容吗？")){
                    var s = JSON.stringify(emp_ids);
                    //发起ajax请求删除数据
                    $.ajax({
                        url:"${pageContext.request.contextPath}/employee/deleteAll",
                       /* data:"emp_ids="+emp_ids,*/
                        dataType: "json",
                        data:{"emp_ids":s},
                        type:"GET",
                        success:function (result) {
                            to_page(nowPage);
                        }
                    })
                }
            })
        });
    </script>
</head>
<body>
<!--修改弹出框Modal -->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">员工修改</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <input type="text" name="name" class="form-control" id="inputName1" placeholder="请输入姓名">
                            <%--如果不能修改姓名  则用下面这个--%>
                            <%--<p class="form-control-static" id="inputName1">email@example.com</p>--%>
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="inputGender3" value="男"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="inputGender4" value="女"> 女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-10">
                            <input type="email" name="email" class="form-control" id="inputEmail1" placeholder="请输入邮箱">
                            <%--把错误信息显示在这里--%>
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">所属部门</label>
                        <div class="col-sm-10">
                            <input type="text" name="dep_name" class="form-control" id="depName1" placeholder="请输入部门名称">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="update_data">修改</button>
            </div>
        </div>
    </div>
</div>
<!--添加弹出框Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">员工添加</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <input type="text" name="name" class="form-control" id="inputName" placeholder="请输入姓名">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="inputGender1" value="男"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="inputGender2" value="女"> 女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-10">
                            <input type="email" name="email" class="form-control" id="inputEmail" placeholder="请输入邮箱">
                            <%--把错误信息显示在这里--%>
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">所属部门</label>
                        <div class="col-sm-10">
                            <input type="text" name="dep_name" class="form-control" id="depName" placeholder="请输入部门名称">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="add_data">添加</button>
            </div>
        </div>
    </div>
</div>
<%--搭建页面信息--%>
<div class="container">
    <%--标题--%>
    <div class="row">
        <div class="col-md-12">
            <h1>实现增删查改</h1>
        </div>
    </div>
    <%--按钮--%>
    <div class="row">
        <div class="col-md-4 col-md-offset-8">
            <%--当点击按钮添加时  弹出添加框--%>
            <button class="btn btn-primary" id="add_btn">
                <span class="glyphicon glyphicon-plus" id="add_btn" aria-hidden="true"></span>
                添加
            </button>
            <button type="button" class="btn btn-danger" id="deleteAll_btn">
                <span class="glyphicon glyphicon-trash"  aria-hidden="true"></span>
                全部删除
            </button>
        </div>
    </div>
    <%--显示数据--%>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-hover table-bordered" id="emps_table">
                <thead>
                    <tr>
                        <th>
                            全选<input type="checkbox" id="check_all" value="全选/全不选"/>
                        </th>
                        <th>编号</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>邮箱</th>
                        <th>所属部门</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <%--员工信息显示区域--%>
                </tbody>
            </table>
        </div>
        <%--分页--%>
        <div class="row">
            <%--分页信息--%>
            <div class="col-md-8" id="page_nav_area">
                <%--分页条显示区域--%>
            </div>
        </div>
    </div>
</div>
</body>
</html>
